<html>
<head>
    <title>Vue测试输入</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>
<body>
	<div id="app">
		<p>{{msg}}</p>
		<div><input v-model="name" /></div>
		<div><button v-on:click='changeShow'>控制显示与隐藏</button></div>
		<div>
			刚才输入的是：{{name}}
		</div>
		<div v-if="name==11">
			当name==11时我就存在页面并且显示出来了。
		</div>
		<div v-show="show">
			当show=true时我就显示出来了。
		</div>
	</div>
	
</body>
    <script>
	//这段代码得放置在dom元素加载完毕之后才能运行，因为他要对id=app的dom进行渲染，所以必须等dom都加载完毕才能初始化vue
		//双向绑定
		//vm为vue中调度者，mvvm中的vm
		var vm = new Vue({
			el:'#app',//vue需要控制渲染的元素id，mvvm中的v
			data:{//mvvm中的m，与视图v对应绑定的对象
				msg:'欢迎进入Vue学习乐园！',
				name:null,
				show:false
			},
			watch:{
				name:function(n,o){
					console.log('new,old:',n,o)
				}
			},
			methods:{
				changeShow(){
					this.show=!this.show
				}
			}
		})
    </script>
</html>